<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<!--<div id="app">
     <p>{{ message }}</p>
</div>-->
<div id="app">
  <input v-model='search' />
  <ul v-if="searchData.length > 0">
    <li v-for="item in searchData">{{item.name}},价格:￥{{item.price}}</li>
  </ul>
  <div v-else>暂无数据</div>
</div>
<script type="text/javascript">
/*    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            var url = "http://59.110.165.13:7500/business/findBusinessOne";
                axios.post(url,{id:"1"}).then(function(res) {
                    console.log(res,app.message);
                    app.message = res;
                });
        },
    })*/
  
  var vm = new Vue({
  el: '#app',
  data: {
    search: '',
    products: [{
      name: '苹果',
      price: 25,
      category: "水果"
    }, {
      name: '香蕉',
      price: 15,
      category: "水果"
    }, {
      name: '雪梨',
      price: 65,
      category: "水果"
    }, {
      name: '宝马',
      price: 2500,
      category: "汽车"
    }, {
      name: '奔驰',
      price: 10025,
      category: "汽车"
    }, {
      name: '柑橘',
      price: 15,
      category: "水果"
    }, {
      name: '奥迪',
      price: 25,
      category: "汽车"
    }]
  },
  computed: {
    searchData: function() {
      var search = this.search;

      if (search) {
        return this.products.filter(function(product) {
          return Object.keys(product).some(function(key) {
            return String(product[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }

      return this.products;
    }
  }
})
</script>
</body>
</html>